import 'dart:io';

import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:xiaomi/app/modules/goodList/views/good_list_view.dart';
import 'package:xiaomi/app/modules/tools/screenAdapter.dart';
import 'package:xiaomi/app/routes/app_pages.dart';
import 'package:xiaomi/app/modules/tools/httpClient.dart';
import '../controllers/category_controller.dart';

class CategoryView extends GetView<CategoryController> {
  const CategoryView({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: InkWell(
          onTap: () {
            print('点击了搜索按钮');
            Get.toNamed(Routes.SEARCH_PAGE);
          },
          child: Container(
            width: ScreenAdapter.width(700),
            height: ScreenAdapter.height(90),
            decoration: BoxDecoration(
                color: Colors.black12, borderRadius: BorderRadius.circular(45)),
            child: Row(
              children: [
                const Padding(
                  padding: EdgeInsets.only(left: 10),
                  child: Icon(Icons.search),
                ),
                Text(
                  '搜索',
                  style: TextStyle(fontSize: ScreenAdapter.fontSize(40)),
                )
              ],
            ),
          ),
        ),
        // centerTitle: true,
        actions: [
          TextButton(
              onPressed: () {}, child: const Icon(Icons.message_outlined)),
        ],
      ),
      body: Row(
        children: [
          /// 左侧的菜单按钮
          Container(
            width: ScreenAdapter.width(250),
            height: double.infinity,
            // color: Colors.blue,
            child: Obx(() => ListView.builder(
                itemCount: controller.catelistData.length,
                itemBuilder: (context, index) {
                  return Obx(() => InkWell(
                        onTap: () {
                          controller.updateSelectIndex(index);
                        },
                        child: SizedBox(
                          height: ScreenAdapter.height(180),
                          width: ScreenAdapter.width(220),
                          // width: double.infinity,
                          child: Row(
                            children: [
                              Container(
                                width: ScreenAdapter.width(15),
                                height: ScreenAdapter.height(60),
                                color: controller.selectIndex.value == index
                                    ? Colors.red
                                    : Colors.white,
                              ),
                              Container(
                                width: ScreenAdapter.width(220),
                                alignment: Alignment.center,
                                child: Text(
                                  '${controller.catelistData[index].title}',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                      fontSize:
                                          controller.selectIndex.value == index
                                              ? ScreenAdapter.fontSize(42)
                                              : ScreenAdapter.fontSize(36),
                                      fontWeight:
                                          controller.selectIndex.value == index
                                              ? FontWeight.bold
                                              : FontWeight.normal),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ));
                })),
          ),

          /// 右侧详情展示
          Expanded(
            child: Container(
              // padding: const EdgeInsets.only(left: 10, right: 10),
              decoration: const BoxDecoration(color: Colors.white),
              child: Obx(() => GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    crossAxisSpacing: 20,
                    childAspectRatio: 2 / 3,
                  ),
                  itemCount: controller.catelistData2.length,
                  itemBuilder: (context, inx) {
                    // String picUrl = controller.catelistData2.
                    return InkWell(
                      onTap: () {
                        /// 点击界面跳转
                        Get.toNamed(Routes.GOOD_LIST, arguments: {
                          'sid': controller.catelistData2[inx].sId
                        });
                      },
                      child: Column(
                        children: [
                          Container(
                            padding: const EdgeInsets.only(left: 10, right: 10),
                            width: double.infinity,
                            // height: ScreenAdapter.height(300),
                            child: Image.network(
                              HttpClient.imageUrl(
                                  controller.catelistData2[inx].pic!),
                              fit: BoxFit.fitHeight,
                            ),
                          ),
                          Text("${controller.catelistData2[inx].title}"),
                        ],
                      ),
                    );
                  })),
            ),
          )
        ],
      ),
    );
  }
}
